<template>
  <view>
    <view class="ai-bg">
      <image src="@/assets/pic/ai-bg.png" class="bg-img" mode="widthFix"></image>
    </view>
    <uv-navbar :fixed="false" bgColor="transparent" class="navbar" leftIconColor='#fff' :titleStyle="{color:'#fff'}"
      title="Ai角色扮演">
      <template v-slot:left>
        <view class="d-flex d-flex-aic">
          <uv-icon name="arrow-left" color="#fff" size="25" @click="navigateBack()"></uv-icon>
          <uv-icon class="ml-normal" name="home" color="#fff" @click="reLaunchToHome()" size="26"></uv-icon>
        </view>
      </template>
    </uv-navbar>
    <view class="ai-login-card">
      <view class="ai-title">设置(修改)彼此称呼</view>
      <view class="ai-title">点击'确定'开始聊天</view>
      <uv-form :model="model" :rules="rules" ref="form" labelPosition='top' labelWidth="8em" class="form">
        <uv-form-item label="您对逝者的称呼" class="px-big mt-normal" borderBottom prop="him" required>
          <uv-input v-model="model.him" border="none" placeholder="请输入您对逝者的称呼">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="逝者对您的称呼" class="px-big mt-normal" borderBottom prop="me" required>
          <uv-input v-model="model.me" border="none" placeholder="请输入逝者对您的称呼">
          </uv-input>
        </uv-form-item>
      </uv-form>
      <view class="px-normal mt-big btn-box">
        <uv-button class="btn" type="info" text="取消" @click="handleCencal"></uv-button>
        <uv-button class="btn" type="primary" text="确定" @click="handleSubmit"></uv-button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from "vue";
  import {
    navigateBack,
    navigateToAiDialogue,
    reLaunchToHome
  } from "@/assets/scripts/navigate.js"
  import {
    setItem
  } from "@/assets/scripts/aiStorage.js"
  import {
    useRoute
  } from 'vue-router';

  const form = ref()
  const meMemorialId = ref('')
  const model = ref({
    him: '',
    me: '',
  })

  const rules = {
    him: {
      type: 'string',
      required: true,
      message: '请输入逝者对您的称呼',
      trigger: ['blur', 'change']
    },
    me: {
      type: 'string',
      required: true,
      message: '请输入逝者对您的称呼',
      trigger: ['blur', 'change']
    },
  }

  const handleSubmit = () => {
    form.value.validate().then((res) => {
      // console.log(model.value);
      const aiTitle = {
        me: model.value.me,
        him: model.value.him,
        meMemorialId: meMemorialId.value,
      }
      setItem(aiTitle);
      navigateToAiDialogue(meMemorialId.value)
    })
  }

  const handleCencal = () => {
    navigateBack()
  }

  const route_init = () => {
    const route = useRoute()
    if (route.query.meMemorialId && route.query.meMemorialId !== 'undefined') {
      meMemorialId.value = route.query.meMemorialId
    }
    if (route.query.me && route.query.me !== 'undefined') {
      model.value.me = route.query.me
    }
    if (route.query.him && route.query.him !== 'undefined') {
      model.value.him = route.query.him
    }
  }

  onMounted(() => {
    route_init() // 初始化
  })
</script>

<style lang="scss" scoped>
  .ai-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    .bg-img {
      width: 100%;
      display: block;
    }
  }

  .ai-login-card {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80vw;
    max-width: 320px;
    height: 320px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 5px 5px 1px 1px #ffffff57;

    .ai-title {
      color: #3c9cff;
      font-size: 18px;
    }

    .btn-box {
      display: flex;

      .btn {
        flex: 1;
        margin: 0 10px;
      }
    }
  }
</style>